<template>
	<div>
		<div v-cloak class="site_info_wrap">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-col class="line_h" :span="24">
						<el-col class="text_r" :span="10">
							站点名称
						</el-col>
						<el-col :span="14">
							{{name}}
						</el-col>
					</el-col>
					<el-col class="line_h" :span="24">
						<el-col class="text_r" :span="10">
							站点性质
						</el-col>
						<el-col v-if="type == 1" :span="14">
							直营
						</el-col>
						<el-col v-if="type == 2" :span="14">
							加盟
						</el-col>
					</el-col>
					<el-col class="line_h" :span="24">
						<el-col class="text_r" :span="10">
							联系电话
						</el-col>
						<el-col :span="14">
							{{mobile}}
						</el-col>
					</el-col>
					<el-col class="line_h" :span="24">
						<el-col class="text_r" :span="10">
							地址
						</el-col>
						<el-col :span="14">
							{{address.province}} {{address.city}} {{address.area}} {{address.street}} {{address.detail}}
						</el-col>
					</el-col>
					<el-col class="line_h" :span="24">
						<el-col class="text_r" :span="10">
							营业时间
						</el-col>
						<el-col :span="14">
							{{bizTime.start}}&nbsp;到&nbsp;{{bizTime.end}}
						</el-col>
					</el-col>
					<el-col class="line_h" :span="24">
						<el-col class="text_r" :span="10">
							服务小区
						</el-col>
						<el-col :span="12">
							<span v-for="item in plot">
								{{item}}&nbsp;
							</span>
						</el-col>
					</el-col>
					<el-col class="line_h" :span="24">
						<el-col class="text_r" :span="10">
							库存量
						</el-col>
						<el-col :span="14">
							{{name}}
						</el-col>
					</el-col>
					<el-col class="line_h" :span="24">
						<el-col class="text_r" :span="10">
							门店租赁日期
						</el-col>
						<el-col :span="14">
							{{joinStartDate}} &nbsp;到&nbsp;{{joinEndDate}}
						</el-col>
					</el-col>
				</el-col>
				<el-col :span="12">
					<div id="container"></div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col class="line_h" :span="14">
					<el-col class="text_r" :span="10">
						站点负责人
					</el-col>
					<el-col :span="14">
						{{manager.name}}
					</el-col>
				</el-col>
				<el-col class="line_h" :span="10">
					<el-col class="text_r" :span="10">
						租金
					</el-col>
					<el-col :span="14">
						{{shop.rentMoney}} 元
					</el-col>
				</el-col>
				<el-col class="line_h" :span="14">
					<el-col class="text_r" :span="10">
						负责人手机
					</el-col>
					<el-col :span="14">
						{{name}}
					</el-col>
				</el-col>
				<el-col class="line_h" :span="10">
					<el-col class="text_r" :span="10">
						负责人身份证
					</el-col>
					<el-col :span="14">
						{{manager.mobile}}
					</el-col>
				</el-col>
				<el-col class="line_h" :span="14">
					<el-col class="text_r" :span="10">
						微信
					</el-col>
					<el-col :span="14">
						{{manager.wechat}}
					</el-col>
				</el-col>
				<el-col class="line_h" :span="10">
					<el-col class="text_r" :span="10">
						负责人支付宝
					</el-col>
					<el-col :span="14">
						{{manager.alipay}}
					</el-col>
				</el-col>
				<el-col class="line_h" :span="14">
					<el-col class="text_r" :span="10">
						紧急联系人
					</el-col>
					<el-col :span="14">
						{{emergencyContractor.name}}
					</el-col>
				</el-col>
				<el-col class="line_h" :span="10">
					<el-col class="text_r" :span="10">
						紧急联系人电话
					</el-col>
					<el-col :span="14">
						{{emergencyContractor.mobile}}
					</el-col>
				</el-col>
				<el-col class="line_h" :span="14">
					<el-col class="text_r" :span="10">
						加盟费
					</el-col>
					<el-col :span="14">
						{{joinMoney}} 元
					</el-col>
				</el-col>
				<el-col class="line_h" :span="10">
					<el-col class="text_r" :span="10">
						保证金
					</el-col>
					<el-col :span="14">
						{{assuranceMoney}} 元
					</el-col>
				</el-col>
				<el-col class="line_h" :span="14">
					<el-col class="text_r" :span="10">
						加盟合作日期
					</el-col>
					<el-col :span="14">
						{{name}}
					</el-col>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col class="text_r" :span="3">
					门店照片
				</el-col>
				<el-col class="mdphoto" :span="21">
					<el-col v-for="item in photos" :span="6">
						<img :src="item" />
					</el-col>
				</el-col>
			</el-row>
			<!-- <el-row :gutter="20">
				<el-col class="text_r" :span="3">
					站点公众号二维码
				</el-col>
				<el-col :span="21">
					<el-col :span="4">
						<img :src="wechatPublicQRCode" class="erweima_img" />
					</el-col>
					<el-button @click="downLoad(wechatPublicQRCode)" type="primary">下载</el-button>
				</el-col>
			</el-row> -->
		</div>
	</div>
</template>
<script>
	import http from '@/assets/js/http.js'

	export default {
		data() {
			return {
				mapObject: {},
				siteInfo: {},

				address: {
					area: '',
					city: '',
					detail: '',
					province: '',
					street: ""
				},
				assuranceMoney: '',
				bizTime: {
					end: '',
					start: ''
				},
				emergencyContractor: {
					mobile: '',
					name: ''
				},
				joinEndDate: '',
				joinMoney: '',
				joinStartDate: '',
				manager: {
					alipay: '',
					idcard: '',
					mobile: '',
					name: '',
					wechat: '',
				},
				mobile: '',
				name: '',
				photos: [],
				plot: [],
				shop: {
					area: '',
					rentEndDate: '',
					rentMoney: '',
					rentStartDate: '',
				},
				siteId: '',
				type: '',
				wechatPublicQRCode: '',
				location: {
					lat: '',
					lng: ''
				}
			};
		},
		mounted() {

		},
		created() {
			this.siteId = this.$route.query.siteId
			this.getSiteDetail(this.siteId)
		},
		methods: {
			getSiteDetail(siteId) {
				this.apiGet("/api/backend/base/site/detail?siteId="+siteId).then(res => {
					if(res.code == 200) {
						this.address.area = res.data.address.area
						this.address.city = res.data.address.city
						this.address.detail = res.data.address.detail
						this.address.province = res.data.address.province
						this.address.street = res.data.address.street

						this.assuranceMoney = res.data.assuranceMoney
						this.bizTime.end = res.data.bizTime.end
						this.bizTime.start = res.data.bizTime.start

						this.emergencyContractor.mobile = res.data.emergencyContractor.mobile
						this.emergencyContractor.name = res.data.emergencyContractor.name
						this.joinEndDate = res.data.joinEndDate
						this.joinMoney = res.data.joinMoney
						this.joinStartDate = res.data.joinStartDate

						this.manager.alipay = res.data.manager.alipay
						this.manager.idcard = res.data.manager.idcard
						this.manager.mobile = res.data.manager.mobile
						this.manager.name = res.data.manager.name
						this.manager.wechat = res.data.manager.wechat

						this.mobile = res.data.mobile
						this.name = res.data.name
						this.photos = res.data.photos
						this.plot = res.data.plot

						this.shop.area = res.data.shop.area
						this.shop.rentEndDate = res.data.shop.rentEndDate
						this.shop.rentMoney = res.data.shop.rentMoney
						this.shop.rentStartDate = res.data.shop.rentStartDate

						this.siteId = res.data.siteId
						this.type = res.data.type
						// this.wechatPublicQRCode = res.data.wechatPublicQRCode
						
						this.location.lat = res.data.location.lat //纬度
						this.location.lng = res.data.location.lng //经度
						
						this.initMap(this.location.lng, this.location.lat);
					}
				})
			},
			downLoad(url) {
				if(this.myBrowser() === "IE" || this.myBrowser() === "Edge") {
					this.SaveAs5(url);
				} else {
					this.download(url);
				}
			},
			myBrowser() {
				var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
				var isOpera = userAgent.indexOf("Opera") > -1;
				if(isOpera) {
					return "Opera"
				}; //判断是否Opera浏览器
				if(userAgent.indexOf("Firefox") > -1) {
					return "FF";
				} //判断是否Firefox浏览器
				if(userAgent.indexOf("Chrome") > -1) {
					return "Chrome";
				}
				if(userAgent.indexOf("Safari") > -1) {
					return "Safari";
				} //判断是否Safari浏览器
				if(userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
					return "IE";
				}; //判断是否IE浏览器
				if(userAgent.indexOf("Trident") > -1) {
					return "Edge";
				} //判断是否Edge浏览器
			},
			SaveAs5(imgURL) {
				var oPop = window.open(imgURL, "", "width=1, height=1, top=5000, left=5000");
				for(; oPop.document.readyState != "complete";) {
					if(oPop.document.readyState == "complete") break;
				}
				oPop.document.execCommand("SaveAs");
				oPop.close();
			},
			download(src) {
				var $a = document.createElement('a');
				$a.setAttribute("href", src);
				$a.setAttribute("download", "");

				var evObj = document.createEvent('MouseEvents');
				evObj.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, null);
				$a.dispatchEvent(evObj);
			},
			initMap(longitude, latitude) {
				if(longitude&&latitude) {
					var map = new AMap.Map('container', {
						zoom: 13, //级别
						center: [longitude, latitude], //中心点坐标
						viewMode: '3D' //使用3D视图
					});
					var marker = new AMap.Marker({
						position: new AMap.LngLat(longitude, latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
					});
					// 将创建的点标记添加到已有的地图实例：
					map.add(marker);
				} else {
					return false;
				}
			}
		},
		mixins: [http]
	}
</script>

<style scoped>
	.site_info_wrap {
		padding: 60px 0 50px;
		background: #fff;
		font-size: 14px;
		color: #666;
	}
	
	.text_l {
		text-align: left;
	}
	
	.text_r {
		text-align: right;
	}
	
	.line_h {
		padding: 20px 0;
	}
	
	#container {
		width: 400px;
		height: 400px;
	}
	
	.mdphoto img {
		width: 200px;
		height: 200px;
	}
	
	.erweima_img {
		width: 200px;
		height: 200px;
	}
</style>